<template>
	<view>
		<block v-if="stype=='list'">
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					{{stitle}}
				</view>
				<view class="action">
					({{imgList.length}}/{{max}})
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" v-if="index<parseInt(max)" @tap="ViewImage"
					 :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill" style="border-radius: 50%;"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<parseInt(max)">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="stype='map'">
			<view class="bg-img relative" v-for="(item,index) in imgList" :key="index" v-if="index<parseInt(max)" @tap="ViewImage"
			 :data-url="imgList[index]">
				<image :src="imgList[index]" mode="widthFix" class="w100"></image>
				<view class="cu-tag bg-red absolute absolute-tr" @tap.stop="DelImg" :data-index="index">
					<text class='cuIcon-close'></text>
				</view>
			</view>
			<block v-if="imgList.length<parseInt(max)">
				<view v-if="bg" @tap="ChooseImage">
					<image :src="bg" mode="widthFix" class="w100"></image>
				</view>
				<view v-else class="solids" @tap="ChooseImage">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			stype: {
				type: String,
				default: 'list'
			},
			bg: {
				type: String,
				default: ''
			},
			max: {
				type: String,
				default: "9"
			},
			stitle: {
				type: String,
				default: '图片上传'
			},
		},
		created: function(e) {},
		data() {
			return {
				modalName: null,
				imgList: [],
				uploadList: [],
				imgChange: false,
			}
		},
		methods: {
			getUploadList() {
				// if (this.imgChange) {
				// 	uni.showLoading({
				// 		title: '上传中...'
				// 	})
				// 	for (let i in this.imgList) {
				// 		if (this.imgList[i]) {
				// 			await this.$http
				// 				.upload('uploadImg', {}, this.imgList[i], 'file')
				// 				.then((response) => {
				// 					this.uploadList.push(response.data.url)
				// 				})
				// 				.catch((response) => {
				// 					this.$common.showError('图片上传失败')
				// 				})
				// 		}
				// 	}
				// 	this.imgChange = false
				// }
				return new Promise((resolve, reject) => {
					resolve(this.uploadList)
				})
				// return this.uploadList
			},
			ChooseImage() {
				
				uni.chooseImage({
					count: parseInt(this.max), //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						if (this.imgList.length > this.max) {
							this.imgList = this.imgList.slice(0, this.max)
						}
						this.imgChange = true
						
						console.log(this.imgList)
						for (let i in res.tempFilePaths) {
							if (res.tempFilePaths[i]) {
								this.$http
									.upload('uploadImg', {}, res.tempFilePaths[i], 'file')
									.then((response) => {
										this.uploadList.push(response.data.url)
									})
									.catch((response) => {
										this.$common.showError('图片上传失败')
									})
							}
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				console.log('del imge', e.currentTarget.dataset)
				console.log('this.imgList',this.imgList)
				uni.showModal({
					title: '系统提示',
					content: '确定要删除图片？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgChange = true
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.uploadList.splice(e.currentTarget.dataset.index, 1)
							console.log('this.imgList',this.imgList)
						}
					}
				})
			},
			setData(data) {
				this.imgList = data
				this.uploadList = data
				this.$forceUpdate()
			}
		},
	}
</script>

<style>
	.absolute-tr {
		top: 0;
		right: 0;
	}
</style>
